<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>类型展示-选择题</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="css/subject.css">
</head>
<body>
	<div class="bg2"></div>
	<div class="myStudents">
		<!-- 头部 -->
		<div class="topMain clearfix">
			<div class="fl topMl">
				<img src="images/logo.png" height="72">
			</div>
			<div class="fr topMr">
				<div class="stTop tar">
					<span class="toux">
						<img src="images/toux.jpg" height="37" width="37" alt="">
					</span>
					<span>李小花</span>
					<span>12601330214</span>
					<a href="javascript:;" class="tuichu" title=""><i class="iconfont">&#xe602;</i></a>
				</div>
				<p class="navBar">
					<a href="#"  title="">学中推进</a>
					<a href="#" title="">板块复习</a>
					<a href="#" title="" class="active">套卷训练</a>
					<a href="#" title="">新题更新</a>
					<a href="#" title="">历史答题</a>
				</p>
			</div>
		</div>
		<!-- content -->
		<div class="chooseDy ">
			<h2 class="xzTt">
				<span class="t">套卷训练：</span>
				<span class="t1 tt">数学</span>
				<span class="t2 tt tjo">三角版块大题</span>
				
			</h2>
			<div class="clearfix styleShow pr">
				<!-- 进度条 -->
				
				<div class="shipinBox">
					<h2 class="shipinT flexspb">
						<div class="timeDiv">
							<span>本题已用时： <span class="subtime">00:00:00</span>  </span>
							<span class="span1" >本套卷已用时： <span id="show_time">0</span>  </span>
						</div>
						<a href="javascript:;" class="fr nextJie submitBtn">结束答题</a>
					</h2>
					<div class=" tm_xzt tm_Auto">
						<div id="" class="subNumBox">
							<div class="subNumLine">
								<div class="subNumLineCont subNumlineactive" index="1">1</div>
							</div>
							
						</div>
						
						<div class="timuMain">
							<img class="tm_tit" src="images/tm1.png">
							<!-- 选项 -->
							<div class="clearfix xuanxBox">
								<div class="fl xuanxLi" kl="A">
									<img src="images/ansA.png">
								</div>
								<div class="fl xuanxLi" kl="B">
									<img src="images/ansB.png">
								</div>
								<div class="fl xuanxLi" kl="C">
									<img src="images/ansC.png">
								</div>
								<div class="fl xuanxLi" kl="D">
									<img src="images/ansD.png">
								</div>
							</div>
						</div>
						
					</div>	
				</div>
			</div>
		</div>
	</div>
    <!-- 弹框 -->
	<div class="tisBox disNo">
		<div class="tisCont">
			<div class="tisTop">
				提示
				<img src="images/crosssign.png"  class="tisTopImg">
			</div>
			<div class="tiscont">您还有未作答题目的，确定要结束答题吗？</div>
			<div class="tisoperationBox">
				<div class="tisoperationNo">继续答题</div>
				<div class="tisoperationYes">确定结束</div>
			</div>
		</div>
	</div>
	<!-- 答题结束弹框 -->
	<div class="tisBox disNo">
		<div class="tisCont">
			<div class="tisTop">
				提示
				<img src="images/crosssign.png"  class="tisTopImg">
			</div>
			<div class="tiscont2">全部题目已经作答，总用时：<span>00:45:00</span> </div>
			<div class="tiscont2">确定结束答题吗？</div>
			<div class="tisoperationBox">
				<div class="tisoperationNo">再检查一下</div>
				<div class="tisoperationYes">确定结束</div>
			</div>
		</div>
	</div>
	<!-- 绑笔弹窗 -->
	<div class="bangb">
		<div class="bdBox">
			<h2 class="tt">绑定点阵笔</h2>
			<ul class="inner">
				<li>
					<span>学生姓名</span>
					李小红
				</li>
				<li>
					<span>绑定笔编号</span>
					<input type="text" >
				</li>
			</ul>
			<div class="bdBtns pf">
				<a class="fl cancelBtn tac" href="javascript:;">取消</a>
				<a class="fr badgBtn tac" href="javascript:;">绑定</a>
			</div>
		</div>
	</div>

	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/index.js" type="text/javascript"></script>
	<script>
		var timeNum=0;
		var sArr=[];
		var sArrNum=0;
		
		function secondToDate(second) {
		       if (!second) {
		           return 0;
		       }
		       var time = new Array(0, 0, 0, 0, 0);
		       if (second >= 365 * 24 * 3600) {//计算年
		           time[0] = parseInt(second / (365 * 24 * 3600));
		           second %= 365 * 24 * 3600;
		       }
		       if (second >= 24 * 3600) {//计算天
		           time[1] = parseInt(second / (24 * 3600));
							
		           second %= 24 * 3600;
		       }
		       if (second >= 3600) {//计算时
		           time[2] = parseInt(second / 3600);
							if( time[2]<10){
								time[2]='0'+time[2]
							}
		           second %= 3600;
		       }
		       if (second >= 60) {//计算分
		           time[3] = parseInt(second / 60);
							if( time[3]<10){
								time[3]='0'+time[3]
							}
		           second %= 60;
		       }
		       if (second > 0) {//计算秒
					      if(second<10){
							  second='0'+second
						  }
		           time[4] = second;
		       }
		       return time;
		   }
		var subnumhtml=''
		for(var i=0;i<20;i++){
			var index=i+1;
			subnumhtml+='<div class="subNumLine"><div class="subNumLineCont" index="0" sindex="'+index+'">'+index+'</div></div>'
		}
		$('.subNumBox').html(subnumhtml);
		/* function addlineTime(num){
			num++;
		} */
		$('.subNumLineCont').eq(0).addClass('subNumlineactiveviolet')
		$('.subNumLineCont').eq(0).addClass('subNumlineactive')
		//点击题目
		var num=0;
		
		var time=null;
		clearInterval(time)
		time=setInterval(function(){ 
			num++;
			$('.subNumLineCont').eq(0).attr('index',num)
			var currentTime = secondToDate(num);
			currentTimeHtml =  currentTime[2] + ':' + currentTime[3] + ':' + currentTime[4] ;
			//console.log(currentTimeHtml)
			$('.subtime').html(currentTimeHtml)
		 }, 1000);
		
		$('.subNumLineCont').on('click',function(){
			
			//$(this).attr('index',2)
			var num=$(this).attr('index');
			var that=$(this);
			
			clearInterval(time)
			time=setInterval(function(){ 
				num++;
				that.attr('index',num)
				var currentTime = secondToDate(num);
				currentTimeHtml =  currentTime[2] + ':' + currentTime[3] + ':' + currentTime[4] ;
				//console.log(currentTimeHtml)
				$('.subtime').html(currentTimeHtml)
			 }, 1000);
			//console.log(num)
			sArrNum	=$(this).attr('sindex')
			console.log(sArrNum)
			console.log(sArr)
			$(this).addClass('subNumlineactive');
			$(this).addClass('subNumlineactiveviolet');
			$(this).parent().siblings().find('.subNumLineCont').removeClass("subNumlineactiveviolet");
			/* for(var i=0;i<$('.subNumLine').length;i++){
				var a=$('.subNumLineCont').eq(i).attr('sindex')
				console.log(a)
				if($.inArray(a,sArr)==-1){
					$('.subNumLineCont').eq(i).removeClass("subNumlineactiveviolet")
				}else{
				   $('.subNumLineCont').eq(i).addClass("subNumlineactive")
				}
			} */
			/* if($.inArray(sArrNum,sArr)==-1){
				$(this).addClass('subNumlineactiveviolet');
			}else{
				$(this).addClass('subNumlineactive');
			} */
			/* $('.xuanxLi').removeClass('curLi') */
		})
        // 单选、
        $(".xuanxLi").click(function(event) {
        	$(this).addClass('curLi').siblings('.xuanxLi').removeClass('curLi');
            sArr.push(sArrNum)
			$('.subNumLineCont').eq(sArrNum-1).addClass('subNumlineactive');
        });
        // 点击提交按钮
        $(".submitBtn").click(function(event) {
        	var curLi=$(".curLi").length;
        	if(curLi==0){
        		alert("答案不能为空")
        	}else{
        		var kl=$(".curLi").attr("kl");
        		alert("您选择的答案为："+kl)
        		
        	}
        });

        // 点击头像弹窗绑笔弹窗
        $(".toux img").click(function(event) {
        	$(".bangb").show();
        });
        $(".bangb .cancelBtn").click(function(event) {
        	$(".bangb").hide();  //点击取消按钮，关闭弹窗
        });
        $(".bangb .badgBtn").click(function(event) {
        	alert(222)  //点击绑定按钮，执行事件
        });
		
	
		    function setTime() {
		       // var create_time = Math.round(new Date(Date.UTC(2017, 0, 1, 0, 0, 0)).getTime() / 1000);//设置起始时间为2017年1月1日0点整，注意月份取值是0-11。
		        //var create_time = Math.round(new Date().getTime() / 1000);
				//var timestamp = Math.round((new Date().getTime() ) / 1000);
				timeNum+=1;
		        var currentTime = secondToDate(timeNum);
		        currentTimeHtml =  currentTime[2] + ':' + currentTime[3] + ':' + currentTime[4] ;
		        document.getElementById("show_time").innerHTML = currentTimeHtml;
		    }
		    setInterval(setTime, 1000);
			
	</script>
</body>
</html>